/**
 * Markdown 编辑器组件
 * 基于 ByteMD 构建，支持实时预览、语法高亮、数学公式等功能
 */

'use client';

import { Editor } from '@bytemd/react';
import gfm from '@bytemd/plugin-gfm';           // GitHub 风格 Markdown 支持
import highlight from '@bytemd/plugin-highlight'; // 代码语法高亮
import math from '@bytemd/plugin-math';          // 数学公式支持
import mermaid from '@bytemd/plugin-mermaid';    // Mermaid 图表支持
import { useMemo } from 'react';

// 导入编辑器样式
import 'bytemd/dist/index.css';
import 'highlight.js/styles/github.css';

// 编辑器属性接口
interface MarkdownEditorProps {
  value: string;                              // 编辑器内容
  onChange: (value: string) => void;         // 内容变化回调
  placeholder?: string;                       // 占位符文本
  height?: number;                           // 编辑器高度
}

// 编辑器插件配置
const plugins = [
  gfm(),        // GitHub 风格 Markdown（表格、任务列表等）
  highlight(),  // 代码语法高亮
  math(),       // LaTeX 数学公式
  mermaid(),    // Mermaid 图表
];

/**
 * Markdown 编辑器组件
 * @param value 编辑器内容
 * @param onChange 内容变化回调函数
 * @param placeholder 占位符文本
 * @param height 编辑器高度（像素）
 */
export default function MarkdownEditor({
  value,
  onChange,
  placeholder = '请输入文章内容...',
  height = 400,
}: MarkdownEditorProps) {
  // 编辑器配置，使用 useMemo 优化性能
  const editorConfig = useMemo(() => ({
    placeholder,
    plugins,
    uploadImages: async (files: File[]) => {
      // TODO: 实现图片上传功能
      // 暂时返回空数组，后续可以集成到现有的上传 API
      return [];
    },
  }), [placeholder]);

  return (
    <div className="border rounded-md">
      <Editor
        value={value}
        onChange={onChange}
        plugins={plugins}
        uploadImages={editorConfig.uploadImages}
        placeholder={placeholder}
        style={{ height: `${height}px` }}
      />
    </div>
  );
}
